<template>
  <div id="box">
    <p>找回用人单位的用户名或密码<span>（重新选择）</span></p>
    <div class="stepBox">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="验证身份"></el-step>
        <el-step title="设置新密码"></el-step>
        <el-step title="重置成功"></el-step>
      </el-steps>
    </div>
    <div class="inpBox">
      <el-input
        placeholder="请输入证件号码"
        v-model="certificate"
        @blur="test1()"
      ></el-input>
      <p>{{ certificateTest }}</p>
      <el-input
        placeholder="请输入手机号码"
        v-model="phone"
        @blur="test2()"
      ></el-input>
      <p>{{ phoneTest }}</p>
      <el-input
        placeholder="请输入短信验证码"
        v-model="userCode"
        @blur="test3()"
      ></el-input>
      <p>{{ userCodeTest }}</p>
      <div class="sendTest" @click="getTest()">发送验证码</div>
    </div>
    <button @click="send()">下一步</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      certificate:'',
      certificateTest:'',
      phone:'',
      phoneTest:'',
      userCode:'',
      userCodeTest:''
    };
  },

  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    test1(){
      if(this.certificate==''){
        this.certificateTest='证件号码不能为空'
      }else{
        this.certificateTest=''
      }
    },
    test2(){
      if(this.phone==''){
        this.phoneTest='手机号码不能为空'
      }else{
        this.phoneTest=''
      }
    },
    test3(){
      if(this.userCode==''){
        this.userCodeTest='短信验证码不能为空'
      }else{
        this.userCodeTest=''
      }
    },
    getTest(){
      this.test1();
      this.test2();
      if(this.certificateTest==''&&this.phoneTest==''){
        this.$axios({
          url:'/company/sendCode',
          params:{
            certificate:this.certificate,
            phone:this.phone
          }
        })
      }
    },
    send(){
      this.test1();
      this.test2();
      this.test3();
      if((this.certificateTest==''&&this.phoneTest=='')&&this.userCodeTest==''){
        this.$axios({
          url:'/company/verifyCode',
          params:{
            certificate:this.certificate,
            phone:this.phone,
            userCode:this.userCode
          }
        }).then((res)=>{
          if(res.data.data==true){
            this.$router.push('/NewCompany')
          }else{
            this.userCodeTest='验证码不正确'
          }
        })
      }
    }
  },
  mounted(){
    sessionStorage.setItem('fName','CompanyPassword')
  }
};
</script>
<style lang="less" scoped>
#box {
  width: 95%;
  height: 585px;
  border: 1px solid rgb(201, 201, 201);
  margin: 0 auto;
  p {
    margin-top: 30px;
    font-size: 14px;
    span {
      color: rgb(0, 121, 254);
      cursor: pointer;
    }
  }
  .stepBox {
    margin-top: 20px;
    margin-bottom: 40px;
    /deep/.el-step__icon {
      background: rgb(0, 121, 254);
      border: none;
      color: #fff;
    }
    /deep/.el-step__title {
      font-size: 14px;
    }
  }
  /deep/.el-input {
    width: 195px;
    height: 28px;
    margin: 20px auto 0;
    display: block;
  }
  .inpBox {
    position: relative;
    p:first-of-type {
      color: red;
      font-size: 14px;
      display: inline;
      position: absolute;
      top: -20px;
      left: 60%;
    }
    p:nth-of-type(2) {
      color: red;
      font-size: 14px;
      display: inline;
      position: absolute;
      top: 28px;
      left: 60%;
    }
    p:last-of-type {
      color: red;
      font-size: 14px;
      display: inline;
      position: absolute;
      top: 75px;
      left: 60%;
    }
  }
  .sendTest {
    position: absolute;
    top: 80%;
    left: 50%;
    font-size: 12px;
    margin-left: 28px;
    margin-top: 9px;
    color: rgb(0, 121, 254);
    cursor: pointer;
  }
  button {
    width: 96px;
    height: 40px;
    background: #fff;
    outline: none;
    color: rgb(153, 153, 153);
    border: 1px solid rgb(201, 201, 201);
    margin-top: 70px;
    cursor: pointer;
  }
}
/deep/::-webkit-input-placeholder {
  font-size: 12px;
}
</style>